<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/courseList.css">
    <link rel="stylesheet" href="css/model.css">
</head>
<body>

<header id="header" class="header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
    <div class="header-body">
        <div class="header-container container">
            <div class="header-row">
                <div class="header-column">
                    <div class="header-row">
                        <div class="header-logo">
                            <p><a href="front_home.html">MEOW</a>&emsp;</p><p>></p><p>&emsp; 课程列表</p>
                        </div>
                    </div>
                </div>
            </div>
            <form class="form-inline" id="search" onsubmit="return false;">
                <div class="form-group">
                    <label>类别</label>
                    <select class="form-control" id="courseDiv">
                        <option value="专业必修">专业必修</option>
                        <option value="公共选修">公共选修</option>
                        <option value="慕课">慕课</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>学院</label>
                    <select class="form-control" id="belong">
                        <option value="楚才计划文科班">楚才计划文科班</option>
                        <option value="楚才计划理科班">楚才计划理科班</option>
                        <option value="计算机与信息工程学院">计算机与信息工程学院</option>
                    </select>
                </div>
                <div class="form-group">
                    <input id="hiddenText" type="text" style="display:none">
                    <input id="courseName" type="text" class="form-control" placeholder="请输入课程名称">
                </div>
                <div class="form-group">
                    <button class="btn btn-default" id="searchBtn">查询</button>
                </div>
            </form>
        </div>
    </div>

</header>



    
</div>

<div id="courseList">
    <div id="content" v-cloak>
        <div class="div-relative" id="a" v-for="item in currentPageData">
            <div class="bg1" :style="{backgroundImage: 'url(' + item.image + ')', backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center center'}"></div>
            <div class="bg2"></div>
            <div class="bg3" @click="onclick(item)">
                <h4>{{ item.name }}</h4>
                <p>{{ item.deptName }}</p>
                <p>{{ item.cotypeName }}</p>
                <p>{{ item.tetyName }}</p>
            </div>
        </div>

    </div>

    <nav aria-label="">
        <ul class="pager">
            <li id="prev"><a href="#"><span aria-hidden="true">&larr;</span>Previous</a></li>
            <li id="next"><a href="#">Next<span aria-hidden="true">&rarr;</span></a></li>
        </ul>
    </nav>

</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/theme.js"></script>
<script src="js/theme.init.js"></script>
<script src="js/courseList.js"></script>

</body>
</html>